<template>
  <p style="text-align:center">南宁软件园中心 - 梁世燊 - JSDTN240308 - 许炜烽</p>
  <el-header class="_wf-about-header">
    <div class="_wf-slogan">
      <h2 style="color: #fff;font-weight: 700;font-size: 36px;padding-top: 66px;text-align: center;">凹凸出行<br>万款车型共享平台</h2>
    </div>
    <!--  导航标签  -->
    <el-menu
        default-active="1"
        class="_wf-el-menu"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#00BC93"
        background-color="rgba(187,255,189,0)"
        text-color="#666"
    >
      <el-menu-item index="1" class="_wf-menu-item"><router-link to="/about/knowUs" ref="defaultLink" >关于我们</router-link></el-menu-item>
      <el-menu-item index="2" class="_wf-menu-item"><router-link to="/about/milestone">发展历史</router-link></el-menu-item>
      <el-menu-item index="3" class="_wf-menu-item"><router-link to="/about/mediaReport">媒体报道</router-link></el-menu-item>
      <el-menu-item index="4" class="_wf-menu-item"><router-link to="/about/rule">平台规则</router-link></el-menu-item>
      <el-menu-item index="5" class="_wf-menu-item"><router-link to="/about/leasingProcedures">租车流程</router-link></el-menu-item>
      <el-menu-item index="6" class="_wf-menu-item"><router-link to="/about/insuranceClauses">服务条款</router-link></el-menu-item>
      <el-menu-item index="7" class="_wf-menu-item"><router-link to="/about/ownersResAndIegal">车主责任/法律解读</router-link></el-menu-item>
      <el-menu-item index="8" class="_wf-menu-item"><router-link to="/about/vipServiceWeb">服务协议</router-link></el-menu-item>
      <el-menu-item index="9" class="_wf-menu-item"><router-link to="/about/privacyPolicy">隐私协议</router-link></el-menu-item>

    </el-menu>

  </el-header>

  <!-- 展示内容 -->
  <el-main>
    <router-view></router-view>
  </el-main>
  <el-footer></el-footer>
</template>
<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 在组件创建时手动触发路由导航
onMounted(() => {
  const router = useRouter();
  router.push('/about/knowUs');
});
</script>

<style scoped>
body{
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
._wf-about-header {
  height: 444px;
  background: url(https://www.atzuche.com/static/media/banner.f58bddf7.jpg) 50% no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 105px;

}
._wf-el-menu{
  width: 1080px;
  height: 100px;
  bottom: -40px;
  box-shadow: 0 3px 5px rgba(73, 81, 115, .06);
  background-color: #fff;
  border-radius: 4px;
  justify-content: space-between;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
._wf-menu-item{
  height: 100px;
  line-height: 100px;
  color: #666;
  font-size: 16px;
  padding: 0 0;
  cursor: pointer;
}
._wf-menu-item>a{
  padding: 0 20px;
}
/** 内容 */

</style>